<template>
  <el-dialog :title="title" :visible="visible" width="960px" :before-close="handleClose">
    <div class="preview">
      <EduAliyunPlayer ref="player" :args="aplayer"> </EduAliyunPlayer>
    </div>
  </el-dialog>
</template>

<script>
import EduAliyunPlayer from '@/components/EduAliyunPlayer' // 播放器
const defaultProps = {
  id: 'player-con', // 播放器外层容器的dom元素ID
  source: '', // 视频播放地址URL
  vid: '', // 媒体转码服务的媒体ID
  playauth: '', // 播放凭证
  width: '100%', // 播放器宽度
  height: '518px', // 播放器高度
  cover: '', // 播放器默认封面图片
  format: 'm3u8', // 播放地址格式
  autoplay: false, // 播放器是否自动播放
  encryptType: 0, // 设置是否播放阿里云视频加密（私有加密）视频
  marquee: [''] // 跑马灯
}
export default {
  props: {
    visible: Boolean,
    src: String,
    title: String
  },
  components: {
    EduAliyunPlayer
  },
  data() {
    return {
      aplayer: {
        ...defaultProps,
        source: this.src
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    }
  },
  beforeDestroy() {
    const player = this.$refs.player
    player && player.pause()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__title {
  display: block;
  max-width: 480px;
  @include ellipsis();
}
.preview {
  overflow: hidden;
  position: relative;
  background-color: #000;
  ::v-deep .prism-player {
    .prism-controlbar .prism-controlbar-bg {
      background: rgba(0, 0, 0, 0.3);
    }
    .prism-time-display {
      color: #fff;
      font-size: 14px;
    }
    .prism-liveshift-progress .prism-progress-loaded,
    .prism-progress .prism-progress-loaded {
      background: rgba(255, 255, 255, 0.8);
    }
    .prism-liveshift-progress .prism-progress-played,
    .prism-progress .prism-progress-played {
      @include edu-color-primary(background-color);
    }
    .prism-liveshift-progress,
    .prism-progress {
      background: rgba(255, 255, 255, 0.3);
    }
    .prism-liveshift-progress .prism-progress-cursor,
    .prism-progress .prism-progress-cursor {
      top: -7px;
      background: #fff;
      @include edu-color-primary(border-color);
      img {
        display: none;
      }
    }
    .volume-icon {
      margin-right: 6px;
      line-height: 28px;
      text-align: center;
      background: none;
      font-family: 'eduline' !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      &:before {
        content: '\e60e';
        font-size: 20px;
        color: #fff;
      }
      .short-horizontal,
      .long-horizontal {
        display: none;
      }
    }
    .prism-fullscreen-btn {
      background: none;
      font-family: 'eduline' !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      &:before {
        content: '\edd0';
        font-size: 20px;
        color: #fff;
      }
      &:hover {
        animation: none;
      }
    }
    .prism-volume-control .volume-range {
      background: #ffffff;
    }
    .prism-volume-control .volume-cursor:hover,
    .prism-volume-control .volume-value {
      @include edu-color-primary(background-color);
    }
    .rate-list li.current,
    .quality-list li.current {
      @include edu-color-auxiliary;
    }
  }
}
</style>
